<template>
  <div v-loading="state.loading">
    <el-tabs v-model="state.activeName">
      <el-tab-pane label="移库信息" name="first">
        <MoveMessage
          :selectRow="state.selectRow"
          v-if="state.selectRow"
          ref="moveMessage"
        ></MoveMessage>
      </el-tab-pane>
      <el-tab-pane label="阀门确认记录" name="second">
        <ConfirmationRecord
          :scanRecords="state.scanRecords"
          ref="scanRecords"
        ></ConfirmationRecord>
      </el-tab-pane>
      <el-tab-pane label="验度记录" name="three">
        <CheckRecord
          :wineTestRecords="state.wineTestRecords"
          ref="checkRecord"
          v-if="state.wineTestRecords"
        ></CheckRecord>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import MoveMessage from './moveMessage.vue';

import ConfirmationRecord from '@/components/confirmationRecord.vue';
import CheckRecord from '@/components/checkRecord.vue';
import { _axios } from 'vue-kst-auth';
import {
  TransStorageOrderDetailDto,
  WarehouseWineTransferApi,
} from '@/plugins/api';
interface State {
  /** 数据状态 */
  loading: boolean;
  activeName: any;
  selectRow: any;
  scanRecords: any;
  wineTestRecords: any;
}
@Component({
  components: {
    MoveMessage,
    ConfirmationRecord,
    CheckRecord,
  },
})
export default class Index extends Vue {
  WarehouseWineTransferApi = new WarehouseWineTransferApi(
    '/alcohol-management',
    _axios
  );
  @Prop() selectRow!: any;
  /** 数据 */
  state: State = {
    loading: false,
    activeName: 'first',
    selectRow: {},
    scanRecords: [],
    wineTestRecords: [],
  };
  /** 生命周期 */

  mounted() {
    this.getDataDetail();
  }

  // 获取详情
  getDataDetail() {
    this.state.loading = true;

    this.WarehouseWineTransferApi.getById3(this.selectRow.id)
      .then((res: any) => {
        this.state.selectRow = res;
        const row = this.state.selectRow;
        this.state.selectRow.containers = [
          //厂区
          {
            type: '移出',
            Factory: row.export_Factory,
            Warehouse: row.export_Warehouse,
            number: row.export_number,
            StartValue: row.export_StartValue,
            EndValue: row.export_EndValue,
            StartTime: row.export_StartTime,
            EndTime: row.export_EndTime,
            Handler: row.export_Handler,
            Checker: row.export_Checker,
          },
          {
            type: '移入',
            Factory: row.import_Factory,
            Warehouse: row.import_Warehouse,
            number: row.import_number,
            StartValue: row.import_StartValue,
            EndValue: row.import_EndValue,
            StartTime: row.import_StartTime,
            EndTime: row.import_EndTime,
            Handler: row.import_Handler,
            Checker: row.import_Checker,
          },
        ];

        console.log(this.state.selectRow, 'this.state.selectRow');

        // 组装阀门开关明细的list

        this.state.scanRecords = res.scanRecords;

        // 验度记录所需的信息,从container 带出来

        this.state.wineTestRecords = res.wineTestRecords;

        console.log(this.$refs.checkRecord as any);
        (this.$refs
          .checkRecord as any).state.dataSource = this.state.wineTestRecords;

        (this.$refs.checkRecord as any).state.exportNumber = res.export_number;

        console.log(this.state.scanRecords, 'this.state.scanRecords');

        (this.$refs
          .scanRecords as any).state.dataSource = this.state.scanRecords;
      })
      .finally(() => {
        this.state.loading = false;
      });
  }

  /** 监听 */
  /** 计算属性 */
}
</script>
<style lang="scss" scoped></style>
